<template>
	<view class="myNavigateBar">
		<view class="navigaContent">
			<view class="task">
				<uniIcons type="home" size="26" @click="toHome" color="#fff"></uniIcons>
				<image class="location_" src="../../static/location.png" mode=""></image>
				<!-- <view class="checklocation" v-if="!iserror" @click="mylocation">{{cityname}}</view> -->
				<button type="primary" class="locationbtn" @click="mylocation">{{iserror?locationname:cityname}}</button>
			</view>
			<!-- <image src="../../static/images/location.png" class="myIocation" mode=""></image> -->
			<view class="inputCon">
				<uniIcons type="search" color="#8f8f8f"></uniIcons>
				<input type="text" class="myInput" disabled @click="toRouter('/pages/search/index')" placeholder="搜索" value="" />
			</view>
			<view class="task" @click="toMessage">

				<view class="msg">
					{{message}}
				</view>
				<uniIcons type="chat" size="24" color="#fff"></uniIcons>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import amap from '@/common/amap-wx.js';
	export default {
		components: {
			uniIcons
		},
		props: {
			cityname: {
				type: String,
				default: '获取定位'
			},
			message: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				locationname: '',
				mark: '',
				ismark: '',
				iserror: false,
				key: 'e09665ab2c8f03d67d0550e32d605943',
				currCity: '',
				longitude: '',
				latitude: '',
				msg: ""
			};
		},
		onShow() {
			console.log('111')
		},
		onLoad() {
			console.log(this.mark)
			this.unredmessage()
		},
		methods: {
      // 跳转
      toRouter(url){
        console.log(url);
        uni.navigateTo({
          url: url,
          success:(res)=>{
          console.log(res);
        },
          fail:err=>{
            console.log(err);
          }
        })
      },
			unredmessage() {
				let that = this;
				that.$Request.request('/api/message/list', 'GET', {}).then(res => {
					if (res.status == 1) {
						that.msg = res.data.unreadCount
					}
				}).catch(err => {
					console.log(err)
				})
			},
			mylocation() {
				this.mark = 1;
				let that = this;
				//#ifdef APP-PLUS
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: function(res) {
						getApp().globalData.globa_latitude = res.latitude;
						getApp().globalData.globa_longitude = res.longitude;
						that.currCity = res.address.city;
						that.locationname = res.address.city;
						that.iserror = true
						that.$emit('changecity', that.currCity)
						uni.setStorageSync('mycity', that.currCity)
					},
					fail:function(err){
						
					}
				})
				//#endif

				//#ifdef MP-WEIXIN
				let chooseLocation = () => {
					uni.getLocation({
						type: 'wgs84',
						success: function(res) {
							console.log(res)
							var longitude = res.longitude
							var latitude = res.latitude
							var amapPlugin = new amap.AMapWX({
								key: that.key
							});
							amapPlugin.getRegeo({
								location: '' + longitude + ',' + latitude + '',
								success: (data) => {
									console.log(data)
									that.currCity = data[0].regeocodeData.addressComponent.city;
									that.locationname = data[0].regeocodeData.addressComponent.city;
									that.iserror = true
									that.$emit('changecity', that.currCity)
									uni.setStorageSync('mycity', that.currCity)
								}
							});
						},
						fail: err => {
							console.log(err)
							if (err.errMsg == 'getLocation:fail auth deny') {
								this.mark = 1;

							}
						}
					})
				}
				let openSetting = () => {
					uni.openSetting({
						success: res => {
							let locaAuth = res.authSetting['scope.userLocation']
							if (locaAuth) {
								chooseLocation()
							}
							if (!locaAuth) {
								openSetting()
							}
						}
					})
				}
				if (this.mark == 1) {
					console.log(this.mark)
					uni.getSetting({
						success: (res) => {
							let locaAuth = res.authSetting['scope.userLocation']
							if (locaAuth) {
								chooseLocation()
							}
							if (!locaAuth) {
								openSetting()
							}
						}
					})
				}
				chooseLocation()
				//#endif
			},
			toMessage() {
				uni.navigateTo({
					url: '/district/message/message'
				})
			},
			toHome() {
				let pages = getCurrentPages()
				let cPage = pages[pages.length - 1].route
				if (cPage !== "pages/index/index") {
					uni.switchTab({
						url: '../../pages/index/index'
					})
				}
			}
		}

	}
</script>

<style lang="scss">
	.task .uni-button:after {
		border: none !important;
	}

	.locationbtn {
		height: 20px;
		line-height: 20px;
		width: 60px;
		font-size: 12px;
		color: #fff !important;
		/* border: none; */
		padding: 0 !important;
		border-radius: 0px !important;
		background-color: inherit !important;
		margin-top: 5px;
	}

	.myNavigateBar {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		background-color: $themColor;
		position: sticky;
		top: 0;
		z-index: 1988;

		.task {
			height: 60rpx;
			position: relative;
			@extend %flexAlCenter;

			.msg {
				position: absolute;
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				color: #fff;
				font-size: 20rpx;
				top: -15rpx;
				right: 0;
				background-color: #ff196a;
				@extend %flexAlCenter;
			}
		}

		.navigaContent {
			width: 710rpx;
			margin: 0 auto;
			height: 80rpx;
			@extend %flexBetw;

			.myIocation {
				width: 60rpx;
				height: 60rpx;
			}

			.inputCon {
				width: 360rpx;
				height: 60rpx;
				padding: 0 26rpx;
				border-radius: 30rpx;
				background-color: #fff;
				@extend %flexBetw;

				.myInput {
					font-size: $uni-font-size-sm;
				}
			}
		}
	}

	.location_ {
		width: 40upx;
		margin-left: 10px;
		height: 40upx;
		margin-top: 10upx;
	}

	.checklocation {
		font-size: 16upx;
		margin-top: 10upx;
		color: #fff;
	}
</style>
